<!-- @format -->

<template>
  <view class="checkbox-example">
    <text class="example-title">复选框组件示例</text>

    <!-- 基础用法 -->
    <view class="example-section">
      <text class="section-title">基础用法</text>
      <comp-checkbox v-model="checked1">复选框</comp-checkbox>
      <view class="example-value">当前值: {{ checked1 }}</view>
    </view>

    <!-- 禁用状态 -->
    <view class="example-section">
      <text class="section-title">禁用状态</text>
      <comp-checkbox v-model="checked2" disabled>禁用状态</comp-checkbox>
      <comp-checkbox v-model="checked3" disabled>选中且禁用</comp-checkbox>
    </view>

    <!-- 自定义颜色 -->
    <view class="example-section">
      <text class="section-title">自定义颜色</text>
      <comp-checkbox v-model="checked4" checked-color="#07c160"
        >自定义颜色</comp-checkbox
      >
    </view>

    <!-- 复选框尺寸 -->
    <view class="example-section">
      <text class="section-title">复选框尺寸</text>
      <view class="checkbox-row">
        <comp-checkbox v-model="sizeChecked" size="small">小号</comp-checkbox>
        <comp-checkbox v-model="sizeChecked" size="medium">中号</comp-checkbox>
        <comp-checkbox v-model="sizeChecked" size="large">大号</comp-checkbox>
      </view>
    </view>

    <!-- 带边框 -->
    <view class="example-section">
      <text class="section-title">带边框</text>
      <view class="checkbox-row">
        <comp-checkbox v-model="borderChecked1" bordered>未选中</comp-checkbox>
        <comp-checkbox v-model="borderChecked2" bordered>已选中</comp-checkbox>
      </view>
    </view>

    <!-- 半选状态 -->
    <view class="example-section">
      <text class="section-title">半选状态</text>
      <comp-checkbox
        v-model="indeterminateChecked"
        :indeterminate="indeterminate"
      >
        全选
      </comp-checkbox>
      <view class="sub-checkboxes">
        <comp-checkbox v-model="option1" @change="updateIndeterminate"
          >选项 1</comp-checkbox
        >
        <comp-checkbox v-model="option2" @change="updateIndeterminate"
          >选项 2</comp-checkbox
        >
        <comp-checkbox v-model="option3" @change="updateIndeterminate"
          >选项 3</comp-checkbox
        >
      </view>
    </view>

    <!-- 复选框组 -->
    <view class="example-section">
      <text class="section-title">复选框组</text>
      <comp-checkbox-group v-model="groupValue" @change="onGroupChange">
        <comp-checkbox :value="'A'">选项 A</comp-checkbox>
        <comp-checkbox :value="'B'">选项 B</comp-checkbox>
        <comp-checkbox :value="'C'">选项 C</comp-checkbox>
      </comp-checkbox-group>
      <view class="example-value">当前选中: {{ groupValue.join(', ') }}</view>
    </view>

    <!-- 水平排列 -->
    <view class="example-section">
      <text class="section-title">水平排列</text>
      <comp-checkbox-group v-model="horizontalValue" direction="horizontal">
        <comp-checkbox :value="'A'">选项 A</comp-checkbox>
        <comp-checkbox :value="'B'">选项 B</comp-checkbox>
        <comp-checkbox :value="'C'">选项 C</comp-checkbox>
      </comp-checkbox-group>
    </view>

    <!-- 限制最大可选数 -->
    <view class="example-section">
      <text class="section-title">限制最大可选数 (最多选2个)</text>
      <comp-checkbox-group v-model="maxValue" :max="2">
        <comp-checkbox :value="'A'">选项 A</comp-checkbox>
        <comp-checkbox :value="'B'">选项 B</comp-checkbox>
        <comp-checkbox :value="'C'">选项 C</comp-checkbox>
        <comp-checkbox :value="'D'">选项 D</comp-checkbox>
      </comp-checkbox-group>
      <view class="example-value">当前选中: {{ maxValue.join(', ') }}</view>
    </view>

    <!-- 按钮样式 -->
    <view class="example-section">
      <text class="section-title">按钮样式</text>
      <comp-checkbox-group v-model="buttonValue" button>
        <comp-checkbox :value="'A'" button>选项 A</comp-checkbox>
        <comp-checkbox :value="'B'" button>选项 B</comp-checkbox>
        <comp-checkbox :value="'C'" button>选项 C</comp-checkbox>
      </comp-checkbox-group>
    </view>

    <!-- 方法调用 -->
    <view class="example-section">
      <text class="section-title">方法调用</text>
      <comp-checkbox v-model="methodChecked" ref="checkboxRef"
        >通过方法控制</comp-checkbox
      >
      <view class="button-row">
        <button class="action-button" @click="setChecked(true)">
          设为选中
        </button>
        <button class="action-button" @click="setChecked(false)">
          设为未选中
        </button>
        <button class="action-button" @click="toggleChecked">切换状态</button>
      </view>
      <view class="example-value">当前值: {{ methodChecked }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted ,watch} from 'vue';
  import CompCheckbox from './Index.vue';
  import CompCheckboxGroup from './Group.vue';

  // 基础用法
  const checked1 = ref(true);

  // 禁用状态
  const checked2 = ref(false);
  const checked3 = ref(true);

  // 自定义颜色
  const checked4 = ref(true);

  // 复选框尺寸
  const sizeChecked = ref(true);

  // 带边框
  const borderChecked1 = ref(false);
  const borderChecked2 = ref(true);

  // 半选状态
  const indeterminateChecked = ref(false);
  const indeterminate = ref(true);
  const option1 = ref(false);
  const option2 = ref(true);
  const option3 = ref(false);

  // 更新半选状态
  const updateIndeterminate = () => {
    const allChecked = option1.value && option2.value && option3.value;
    const allUnchecked = !option1.value && !option2.value && !option3.value;

    indeterminate.value = !allChecked && !allUnchecked;
    indeterminateChecked.value = allChecked;
  };

  // 全选/取消全选
  watch(indeterminateChecked, (val) => {
    option1.value = val;
    option2.value = val;
    option3.value = val;
    indeterminate.value = false;
  });

  // 初始化半选状态
  onMounted(() => {
    updateIndeterminate();
  });

  // 复选框组
  const groupValue = ref(['A', 'C']);

  // 复选框组变更事件
  const onGroupChange = (values: (string | number | boolean)[]) => {
    console.log('复选框组变更:', values);
  };

  // 水平排列
  const horizontalValue = ref(['A']);

  // 限制最大可选数
  const maxValue = ref(['A']);

  // 按钮样式
  const buttonValue = ref(['A']);

  // 方法调用
  const methodChecked = ref(false);
  const checkboxRef: any = ref(null);

  // 设置选中状态
  const setChecked = (checked: boolean) => {
    checkboxRef.value?.setChecked(checked);
  };

  // 切换选中状态
  const toggleChecked = () => {
    checkboxRef.value?.toggle();
  };
</script>

<style lang="scss" scoped>
  .checkbox-example {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;

    .example-title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
      display: block;
    }

    .example-section {
      margin-bottom: 30px;

      .section-title {
        font-size: 18px;
        margin-bottom: 10px;
        color: #666;
        display: block;
      }

      .example-value {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
      }

      .checkbox-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 10px;
      }
    }

    .sub-checkboxes {
      margin-left: 24px;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }

    .action-button {
      padding: 8px 16px;
      background-color: #1989fa;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
    }
  }
</style>
